<script setup lang="ts">
import SensorData from './SensorData.vue'

// 定义组件属性
const props = defineProps({
  // 视频项数据
  item: {
    type: Object,
    required: true
  },
  // 视频索引（用于DOM ID）
  index: {
    type: Number,
    required: true
  }
})

// 定义事件
const emit = defineEmits(['double-click'])

// 处理双击事件
const handleDoubleClick = () => {
  emit('double-click', props.item)
}
</script>

<template>
  <div class="video-item" @dblclick="handleDoubleClick">
    <div class="video-content" :id="`video_dom_${index}`" style="font-size: 16px;">
      <div v-if="item.loading" class="video-loading">
        <div class="loading-spinner"></div>
        <div class="loading-text">加载中...</div>
      </div>
      <div v-if="item.error" class="video-error">
        <i class="error-icon">!</i>
        <div class="error-text">视频加载失败</div>
      </div>
    </div>
    <div class="video-ele-tag">
      <!-- 使用SensorData组件 -->
      <SensorData v-if="item.SensorData" :sensorData="item.SensorData" />
    </div>
  </div>
</template>

<style scoped lang="scss">
.video-item {
  background: #1a1a1a;
  border-radius: 4px;
  box-sizing: border-box;
  overflow: hidden;
  position: relative;

  &:hover {
    box-shadow: 0 0 4px #444;
  }

  .video-title {
    position: absolute;
    top: 10px;
    left: 10px;
    background: rgba(0, 0, 0, 0.7);
    color: #fff;
    padding: 3px 6px;
    font-size: 12px;
    border-radius: 3px;
    z-index: 10;
  }

  .video-ele-tag {
    position: absolute;
    top: 0;
    right: 15px;
    margin: auto;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    max-width: 80%;
    padding: 6px;
  }
}

.video-content {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 14px !important;
}

.video-loading,
.video-error {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.7);
  z-index: 20;
}

.loading-spinner {
  width: 40px;
  height: 40px;
  border: 3px solid rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  border-top-color: #fff;
  animation: spin 1s ease-in-out infinite;
  margin-bottom: 10px;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

.loading-text,
.error-text {
  color: #fff;
  font-size: 14px;
}

.error-icon {
  width: 40px;
  height: 40px;
  line-height: 40px;
  text-align: center;
  border-radius: 50%;
  background: #ff4d4f;
  color: #fff;
  font-size: 24px;
  font-style: normal;
  margin-bottom: 10px;
}
</style> 